<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage } from "element-plus";
import {
  fetchallUsers,
  fetchRegister,
  updateUsers,
  deleteUsers,
} from "@/api/user";

const filterTableData = ref([]);
const getfetchallUsers = () => {
  fetchallUsers().then((res) => {
    console.log(res.data.data);
    filterTableData.value = res.data.data;
  });
};

onMounted(() => {
  getfetchallUsers();
});

const rules = {
  nickname: [{ required: true, message: "昵称不能为空！", trigger: "blur" }],
  name: [{ required: true, message: "用户名不能为空！", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空！", trigger: "blur" }],
};

const leveloptions = ref({
  value: "",
  leveloptions: [
    { label: "管理员", value: 1 },
    { label: "学生", value: 0 },
    { label: "不限", value: "" },
  ],
});

const currentRow = ref({
  data: { level: 0, nickname: "", username: "", password: "" },
  dialogFormVisible: false,
  flag: true,
});

const handleUpdate = async () => {
  // 当flag为false时，说明是新增用户，否则是修改用户
  console.log(currentRow.value.flag);
  if (!currentRow.value.flag) {
    console.log("新增用户");
    await fetchRegister(currentRow.value.data).then((res) => {
      console.log(res.data.data);
    });
    getfetchallUsers();

    ElMessage.success("新增用户成功");
  } else {
    await updateUsers(currentRow.value.data).then((res) => {
      console.log(res.data.data);
    });
    getfetchallUsers();

    ElMessage.success("更新用户成功");
  }
};

const fetchdeleteUsers = (id) => {
  deleteUsers(id).then((res) => {
    console.log(res.data.data);
    getfetchallUsers();
  });
  ElMessage.success("删除用户成功");
};
</script>

<template>
  <div>
    <div class="flex flex-between">
      <el-select
        v-model="leveloptions.value"
        placeholder="权限"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in leveloptions.leveloptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>

      <el-button
        type="primary"
        @click="
          (currentRow.dialogFormVisible = true),
            (currentRow.data = { level: 0 }),
            (currentRow.flag = false)
        "
        >添加角色</el-button
      >
    </div>
    <el-table
      :data="
        filterTableData.filter(
          (item) =>
            item.level == leveloptions.value || leveloptions.value === ''
        )
      "
      style="width: 100%"
      highlight-current-row
    >
      <el-table-column type="index" width="150" />
      <el-table-column label="昵称" prop="nickname" />
      <el-table-column label="用户名" prop="username" />
      <el-table-column label="密码" prop="password" />
      <el-table-column label="权限" prop="level" />
      <el-table-column align="right">
        <template #header>
          <p>编辑</p>
        </template>
        <template #default="scope">
          <el-button
            size="small"
            @click="
              (currentRow.data = { ...scope.row }),
                (currentRow.dialogFormVisible = true),
                (currentRow.flag = true)
            "
          >
            Edit
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="fetchdeleteUsers(scope.row.id)"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-dialog
        :title="currentRow.flag ? '修改信息' : '新增信息'"
        v-model="currentRow.dialogFormVisible"
      >
        <el-form :model="currentRow.data" status-icon :rules="rules">
          <el-form-item label="昵称：">
            <el-input
              v-model="currentRow.data.nickname"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input
              v-model="currentRow.data.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码：">
            <el-input
              v-model="currentRow.data.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="权限：">
            <el-radio-group v-model="currentRow.data.level">
              <el-radio label="0">学生</el-radio>
              <el-radio label="1">管理员</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="currentRow.dialogFormVisible = false"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click.native="
              (currentRow.dialogFormVisible = false), handleUpdate()
            "
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<style scoped></style>
